<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>


		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			{{message}}
			<greet name2="子组件1 张三" ref="greet1"></greet>
			<greet name2="子组件2 李四" ref="greet2"></greet>
		</div>

		<script>
			var app = Vue.createApp({
				data() {
					return {
						"message": "Hello Vue!",
						"name": "Tom"
					}
				},
				methods: {
					sayHi() {
						console.log("Hi" + this.name);
					}
				},
				mounted(){
					console.log("父组件mounted():"+this.$refs.greet1.name2);
					console.log("父组件mounted():"+this.$refs.greet2.name2);
				}
			});

			app.component("greet", {
				props: ['name2'],
				data() {
					return {
						"name": "jerry"
					}
				},
				created() {
					console.log("greet组件:created()方法")
					this.$root.sayHi();
				},
				template: `<div>根组件:{{$root.name}},父组件:{{$.parent.name}}本组件:{{name}}
				<div>传入的属性{{name2}}</div>
				</div>`
			})


			var vm = app.mount("#app")
		</script>
	</body>
</html>